<template>
<div :class="[$style.container]" v-loading="loading">
  <el-table :data="pageData.rows" style="width: 100%" size="small" v-bind="$attrs">
    <slot></slot>
  </el-table>
  <div :class="[$style.pagination]">
    <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize"
    :current-page="currentPage" @current-change="onCurrentChange"></el-pagination>
  </div>
</div>
</template>

<script lang="ts">

import { PageData } from '@/config/page'
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({
  components: { }
})
export default class DataTable extends Vue {
  @Prop() pageData!: PageData<any>

  get total () {
    return this.pageData.total
  }

  get pageSize () {
    return this.pageData.params.size
  }

  get currentPage () {
    return this.pageData.params.page + 1
  }

  set currentPage (page: number) {
    this.pageData.gotoPage(page - 1)
  }

  get loading () {
    return this.pageData.loading
  }

  onCurrentChange (page: number) {
    this.currentPage = page
  }

  $style!: any
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

}

.pagination {
  margin-top: 12px;
  text-align: right;
}
</style>
